<template>
<div class="page-container">
  <ClSlideWrap
    :duration="20000"
    direction="reverse"
  >
    <p
      v-for="(item, index) in list"
      :key="index"
      :style="{
        'background-color': item
      }"
    >
      {{ index }}
    </p>
  </ClSlideWrap>
  <ClSlideWrap
    :duration="20000"
    direction="normal"
  >
    <p
      v-for="(item, index) in list"
      :key="index"
      :style="{
        'background-color': item
      }"
    >
      {{ index }}
    </p>
  </ClSlideWrap>
</div>
</template>
<script setup>
const list = [
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor(),
  getRandomColor()
]

function getRandomColor() {
  const r = Math.floor(Math.random() * 256)
  const g = Math.floor(Math.random() * 256)
  const b = Math.floor(Math.random() * 256)
  return `rgb(${r},${g},${b})`
}
</script>
<style scoped lang="scss">
.cl-slide-wrap {
  p {
    font-size: 50px;
    padding: 10px 200px;
  }
}
</style>
